<template>
	<view class="content">
		<view class="orders_top">
			<view class="orders_text">
				<view>欢迎来到东邦维修</view>
				<view>
					<image src="../../static/img/order_logo.png"></image>
				</view>
			</view>
			<view class="jd_btn">
				<view class="jd_btn_view1" @click="openId">
					<u-badge :isDot="showDot" type="error"></u-badge>
					{{ jd_btn }}
				</view>
			</view>
		</view>
		<view class="orders_info">
			<view class="orders_content">
				<view class="orders_center">
					<view class="type_item" v-for="(item, index) in order_list" :key="index">
						<view class="item_title">
							<view>维修订单号：</view>
							<view>{{ item.orderNo }}</view>
						</view>
						<view class="item_operation">
							<view class="item_img">
								<image v-if='item.pictureUrl.length==""' :src="item.pictureUrl"></image>
								<image v-else :src="item.pictureUrl.split(',')[0]"></image>
							</view>
							<view class="item_content">
								<view class="item_info">
									<view class="name">
										<view class="name_content">
											<view>报修设备：</view>
											<view>{{ item.equipName }}</view>
										</view>
										<view class="name_content">
											<view>设备型号：</view>
											<view>{{ item.model }}</view>
										</view>
										<!-- <view class="name_content">
												<view>报修单位：</view>
												<view>{{ item.repairUnit }}</view>
											</view> -->
										<view class="name_content">
											<view>问题描述：</view>
											<view>{{ item.problemDescription }}</view>
										</view>
									</view>
									<!-- <view class="describe">
											<view class="describe_content">
												<view>问题描述：</view>
												<view>{{ item.description }}</view>
											</view>
											<view class="describe_content">
												<view>问题描述：</view>
												<view>{{ item.description }}</view>
											</view>
										</view> -->
								</view>
							</view>
						</view>
						<!-- <view class="order_adress"> 
								<view class="order_adress_text">
									<view>
										<image src="../../static/img/adress.png"></image>
									</view>
									<view>{{ item.orderAddress }}</view>
								</view>
							</view> -->
						<view class="item_btn" @click="toAdress(item)">
							<view>查看</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				order_list: [],
				jd_btn: '刷新报修单',
				latitude: '', //纬度
				longitude: '', //经度
				showDot: false,
				timer: null
			};
		},
		onShow() {
			this.queryList()
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
			this.timer = setInterval(() => {
				const params = {
					type: 1,
				};
				this.$newapi.getOrderList(params).then((res) => {
					if (res.code == 200) {
						let data = res.data.list.filter(item=>item.orderStatus == 1)
						if (data > this.order_list.length) {
							this.showDot = true
						} else {
							this.showDot = false
						}
					} else {
						toast(res.msg)
					}
				}).catch((err) => {
					console.log(err);
				});
			}, 100000);
		},
		onUnload() {
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		onHide() {
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		methods: {
			/* toDetails(){
				uni.navigateTo({
					url:'/pages/details/details'
				})
			}, */
			queryList() {
				const params = {
					keyword: '',
					page: 1,
					pageSize: 10,
				};
				/* this.order_list = [
				{id:1,address:'aaa',description:'aaa',repairUnit:'aaa',equipment:'aaa',orderNo:'aaa',pictureUrl:'aaa'},
				{id:2,address:'bbb',description:'bbb',repairUnit:'bbb',equipment:'bbb',orderNo:'bbb',pictureUrl:'bbb'},
			] */
				this.$newapi.getOrderList(params).then((res) => {
					if (res.code == 200) {
						console.log(res);
						this.order_list = res.data.list.filter(item=>item.orderStatus == 1)
						this.showDot = false
					} else {
						toast(res.msg)
					}
				}).catch((err) => {
					console.log(err);
				});
			},
			openId(e) {
				/* let delFlag;
				if(e._relatedInfo.anchorTargetText == '开始接单'){
					this.jd_btn = '停止接单'
					getApp().globalData.falg = 'true'
					delFlag = 0
				}else{
					this.jd_btn = '开始接单'
					getApp().globalData.falg = 'false'
					delFlag = 2
				} */
				this.queryList()
			},
			toAdress(item) {
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = null;
				}
				uni.navigateTo({
					url: `/pagesIndex/confirm_order/confirm_order?orderItem=${JSON.stringify(item)}`
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.content {
		height: 100%;
		width: 100%;
		background-image: url(https://i-blog.csdnimg.cn/direct/41a22387981f4194815ee8d25794652c.jpeg);
		background-repeat: no-repeat;
		background-size: 100% 26%;
	}

	.orders_info {
		width: 100%;
		padding-bottom: 30rpx;
	}

	.orders_text {
		width: 90%;
		height: 100rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
	}

	.orders_text view:nth-child(1) {
		width: 40%;
		height: 100%;
		line-height: 100rpx;
		text-align: left;
		color: #ffffff;
		font-size: 32rpx;
		font-weight: bold;
		font-family: 'PingFang SC';
	}

	.orders_text view:nth-child(2) {
		width: 30rpx;
		height: 100%;
	}

	.orders_text view:nth-child(2) image {
		width: 30rpx;
		height: 30rpx;
		margin-top: 35rpx;
	}

	.orders_bg {
		width: 100%;
	}

	.jd_btn {
		width: 90%;
		height: 100rpx;
		margin: 0 auto;
	}

	.jd_btn_view1 {
		position: relative;
		width: 200rpx;
		height: 60rpx;
		margin-top: 20rpx;
		background: linear-gradient(to right, #3057be ,#60a6f3);
		border-radius: 20rpx;
		color: #fff;
		line-height: 60rpx;
		text-align: center;
		font-size: 24rpx;
		float: right;
		letter-spacing: 1px;
		box-shadow: 5rpx 10rpx 10rpx 5rpx rgba(0, 0, 0, 0.3);
	}

	.jd_btn_view2 {
		width: 200rpx;
		height: 60rpx;
		margin-top: 20rpx;
		background-color: rgba(255, 255, 255, 0.3);
		border-radius: 20rpx;
		color: #3057be;
		line-height: 60rpx;
		text-align: center;
		font-size: 24rpx;
		float: right;
		letter-spacing: 1px;
		box-shadow: 0 10rpx 20rpx rgba(75, 85, 174, 0.27);
	}

	.orders_content {
		width: 100%;
	}

	.orders_center {
		width: 94%;
		/* height: 1200rpx; */
		margin: 0 auto;
		/* overflow: auto; */
	}

	.type_item {
		width: 100%;
		background-color: rgba(255, 255, 255, 0.9);
		/* margin-top: -30rpx; */
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 30rpx;
		border-radius: 30rpx;
		box-shadow: 0 2px 3px 3px rgba(0, 0, 0, 0.1);
	}

	.item_title {
		width: 90%;
		height: 100rpx;
		display: flex;
		flex-direction: row;
		margin-left: auto;
		margin-right: auto;
		border-bottom: 1px solid #f8f8f8;
	}

	.item_title view:nth-child(1) {
		width: 30%;
		height: 100%;
		font-size: 26rpx;
		color: #a2a2a2;
		line-height: 100rpx;
		text-align: left;
	}

	.item_title view:nth-child(2) {
		width: 70%;
		height: 100%;
		font-size: 26rpx;
		color: #a2a2a2;
		line-height: 100rpx;
		text-align: left;
	}

	.item_operation {
		width: 90%;
		// height: 200rpx;
		display: flex;
		flex-direction: row;
		margin-left: auto;
		margin-right: auto;
	}

	.item_img {
		width: 25%;
		height: 100%;
	}

	.item_img image {
		width: 100%;
		height: 170rpx;
		// margin-top: 30rpx;
	}

	.item_content {
		width: 75%;
		height: 100%;
	}

	.item_info {
		width: 100%;
		height: 140rpx;
		// margin-top: 30rpx;
	}

	.name {
		width: 100%;
		// height: 35rpx;
	}

	.name_content {
		width: 95%;
		height: 100%;
		margin: 23rpx auto;
		display: flex;
		flex-direction: row;
	}

	.name_content view:nth-child(1) {
		width: 30%;
		height: 100%;
		color: #a2a2a2;
		text-align: left;
		font-size: 24rpx;
	}

	.name_content view:nth-child(2) {
		// width: 50%;
		height: 100%;
		color: black;
		text-align: left;
		font-size: 24rpx;
	}

	.describe {
		width: 100%;
		height: 105rpx;
	}

	.describe_content {
		width: 95%;
		height: 100%;
		margin: 0 auto;
		word-wrap: break-word;
	}

	.describe_content view:nth-child(1) {
		width: 100%;
		height: 35rpx;
		color: #a2a2a2;
		text-align: left;
		font-size: 22rpx;
	}

	.describe_content view:nth-child(2) {
		width: 100%;
		height: 70rpx;
		color: black;
		text-align: left;
		font-size: 22rpx;
	}

	.order_adress {
		width: 90%;
		// height: 100rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #f8f8f8;
	}

	.order_adress_text {
		// width: 70%;
		height: 100%;
		display: flex;
		flex-direction: row;
	}

	.order_adress_text view:nth-child(1) {
		width: 36rpx;
		height: 36rpx;
		// margin-top: 32rpx;
	}

	.order_adress_text view:nth-child(1) image {
		width: 36rpx;
		height: 36rpx;
	}

	.order_adress_text view:nth-child(2) {
		// width: 80%;
		height: 100%;
		font-size: 22rpx;
		color: #6e81f3;
		// line-height: 100rpx;
		text-align: left;
	}

	.order_adress_distance {
		// width: 30%;
		height: 100%;
		font-size: 18rpx;
		color: #6e81f3;
		// line-height: 100rpx;
		text-align: right;
	}

	.item_btn {
		width: 90%;
		height: 100rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: row-reverse;
	}

	.item_btn view {
		width: 30%;
		height: 60rpx;
		margin-top: 20rpx;
		color: #ffffff;
		background-color: #3057be;
		font-size: 22rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 20rpx;
		margin-left: 30rpx;
	}

	@media (min-width: 768px) {
		.jd_btn_view2 {
			font-size: 20rpx;
		}

		.jd_btn_view1 {
			font-size: 20rpx;
		}

		.item_btn view {
			font-size: 20rpx;
		}
	}

	::v-deep .u-badge {
		position: absolute;
		top: 0;
		right: 0;
	}
</style>
<style>
	page {
		margin: 0;
		padding: 0;
		height: 100%;
		width: 100%;
		background: #fff;
	}

	// 去掉页面滚动条
	::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}
</style>